<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="./node_modules/babel-standalone/babel.js"></script>
</head>
<body>
    <div id="app"></div>

    <!-- render 里面的注意事项
        1. JSX的注释 {/**/}
        2. 循环

     -->
     <script type="text/babel">
        // let oDiv = document.getElementById('app');

        // ReactDOM.render(
        //     <div>
        //         {/*<h4>comment</h4>*/}
        //         <h4>hello world!</h4>
        //     </div>,
        //     oDiv
            
        // );

        // 2. 数组循环：
        // 2.1 filter: 如果带入函数返回true, element 保留，如果返回 false, element 不保留
        let array1 = [1, 3, 5, 4];

        // let array2 = [];
        // for(let i = 0; i < array1.length; i++) {
        //     if(array1[i] > 3) {
        //         array2.push(array1[i]);
        //     }
        // }

        // function isLarger(element, index, array) {
        //     return (element > 3);
        // }

        // let array2 = array1.filter(isLarger);

        // console.log(array2);


        // 2.2 函数 map: 是对每个成员进行处理， 然后放入新数组
        // function addOne(element, index, array) {
        //     return (element+1);
        // }

        // let array2 = array1.map(addOne);

        // console.log(array2);


        // 2.3 函数forEach: 和map 一样， 但是不返回数组
        // let array2 = array1.forEach(addOne);
        // console.log(array1);
        // console.log(array2); // undefined

        // 用react循环
        // let oDiv = document.getElementById('app');
        
        // let createXML2 = (element, index, array) => (
        //         <div>
        //             <h4>element = {element}</h4>    
        //             <h4>index = {index}</h4>
        //         </div>
        // )
        // function createXML(element, index, array) {
        //     return (
        //         <div>
        //             <h4>element = {element}</h4>    
        //             <h4>index = {index}</h4>
        //         </div>
        //     )
        // }

        // ReactDOM.render(
        //     <div>
        //        {
        //            {/*array1.map(createXML)*/},
        //            {/*array1.map(createXML2)*/},
        //            array1.map((element, index, array) => (
        //                 <div>
        //                     <h4>element = {element}</h4>    
        //                     <h4>index = {index}</h4>
        //                 </div>
        //             ))
        //        }
        //     </div>,
        //     oDiv
            
        // );


        // 3. 箭头函数

        // let f1 = function() {
        //     return 'hello';
        // }

        // let f2 = () => {
        //     return 'hello';
        // }

        // 3.1 没有参数， 函数体只有 return
        // let f3 = () => 'hello';


        // let f4 = function(x) {
        //     return x + 'hello';
        // }
        // // 3.2 只有一个函数，函数体只有 return
        // let f5 = (x) => x + 'hello';
        

        // 4. 条件渲染
        // let oDiv = document.getElementById('app');
        // let c1 = true;
        // let c2 = false;

        // let c3 = c1 && <h4>能显示</h4>;
        // console.log(c3);

        // ReactDOM.render(
        //     <div>
        //         {c1 && <h4>能显示</h4>}
        //         {c2 && <h4>显示不出来</h4>}
        //         {c1 ? <h4>当前是 true</h4> : <h4>当前是 false</h4>}
        //     </div>,
        //     oDiv
        // );

        // 5. style {JSON 对象}
        //      JSON 对象 = {color: '#f00', backgroundColor: '#f00'}
        let oDiv = document.getElementById('app');

        ReactDOM.render(
            <div>
                <h4 style={{color: '#f00', backgroundColor: '#fff'}}>AAA</h4>
            </div>,
            oDiv
        );

    </script>

</body>
</html>